<template>
  <view class="TeamMessageItem animate__animated animate__bounceInRight">
    <view class="left">
      <view class="content">{{ messageDetail.content }}</view>
      <view class="time">{{
        $formatTime.formatTimeToHHMMSS(messageDetail.createTime)
      }}</view>
    </view>
    <view class="operator">
      <view class="read">{{ messageDetail.isView ? "已读" : "未读" }}</view>
      <view class="tip" v-if="!messageDetail.isHandle">
        <view class="operatorBtn" v-if="messageDetail.isPower">
          <van-button
            size="mini"
            color="#aaa"
            style="margin-right: 10rpx"
            @click="handleRefuse"
            >拒绝</van-button
          >
          <van-button size="mini" color="#05A47D" @click="handleAgree"
            >同意</van-button
          >
        </view>
        <view class="operatorBtn" v-if="messageDetail.isInvite">
          <van-button
            size="mini"
            color="#aaa"
            style="margin-right: 10rpx"
            @click="handleRefuseInvite"
            >拒绝</van-button
          >
          <van-button size="mini" color="#05A47D" @click="handleAgreeInvite"
            >同意</van-button
          >
        </view>
      </view>
      <view v-else>已处理</view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { TeamMessage } from "../../utils/messageController";
export default {
  name: "TeamMessageItem",
  props: {
    messageDetail: {
      type: Object,
      required: true,
    },
  },
  computed: { ...mapState(["userInfo"]) },
  methods: {
    // 拒绝对方申请加入
    async handleRefuse() {
      const messageId = this.messageDetail._id;
      try {
        await this.$store.dispatch("m_message/updateMessageStatus", {
          messageId,
          isHandle: true,
          isView: true,
        });
        this.sendSubscribeMessage(0); // 发送订阅消息
        this.$emit("refreshMessageList", 1);
        uni.showToast({
          icon: "success",
          title: "拒绝成功",
        });
      } catch (err) {
        uni.showToast({
          icon: "error",
          title: "拒绝失败",
        });
      }
    },

    // 同意对方加入
    async handleAgree() {
      const userId = this.messageDetail._openid,
        teamId = this.messageDetail.teamId,
        messageId = this.messageDetail._id;
      try {
        await this.$store.dispatch("m_team/agreeJoinTeam", {
          userId,
          teamId,
        });
        await this.$store.dispatch("m_message/updateMessageStatus", {
          messageId,
          isHandle: true,
          isView: true,
        });
        this.sendSubscribeMessage(1); // 发送订阅消息
        this.$emit("refreshMessageList", 1);
        uni.showToast({
          icon: "success",
          title: "同意成功",
        });
      } catch (err) {
        uni.showToast({
          icon: "error",
          title: "同意失败",
        });
      }
    },

    // 向申请加入队伍的人发送结果
    async sendSubscribeMessage(type) {
      const receiveId = this.messageDetail._openid,
        text = `加入${this.messageDetail.teamName}队伍`,
        result = type ? "已同意" : "已拒绝",
        time = this.$formatTime.formatTimeForSubscribe();
      try {
        const res = await wx.cloud.callFunction({
          name: "subscribeTeam",
          data: {
            receiveId,
            text,
            result,
            time,
          },
        });
      } catch (err) {
        console.log("云函数发布订阅失败：", err);
      }
    },

    // 拒绝邀请加入队伍
    async handleRefuseInvite() {
      const messageId = this.messageDetail._id;

      try {
        if (this.userInfo.joinTeam.includes(this.messageDetail.teamId)) {
          uni.showToast({
            icon: "error",
            title: "当前已在队伍内",
          });
        } else {
          const messageBox = new TeamMessage().messageForRefuseInvite({
            authorName: this.userInfo.nickName,
            receiveId: this.messageDetail._openid,
          });
          await this.$store.dispatch("m_message/sendMessage", messageBox); // 发送拒绝邀请加入的消息
          uni.showToast({
            icon: "success",
            title: "成功拒绝邀请",
          });
        }
        await this.$store.dispatch("m_message/updateMessageStatus", {
          messageId,
          isHandle: true,
          isView: true,
        });
      } catch (err) {
        console.log("拒绝邀请失败：", err);
      }
    },

    // 同意邀请加入队伍
    async handleAgreeInvite() {
      const userId = this.messageDetail.receiveId,
        teamId = this.messageDetail.teamId,
        messageId = this.messageDetail._id;

      try {
        if (this.userInfo.joinTeam.includes(teamId)) {
          uni.showToast({
            icon: "error",
            title: "当前已在队伍内",
          });
        } else {
          const messageBox = new TeamMessage().messageForAcceptInvite({
            authorName: this.userInfo.nickName,
            receiveId: this.messageDetail._openid,
          });
          console.log("check:", userId, teamId);
          await this.$store.dispatch("m_message/sendMessage", messageBox); // 发送同意邀请加入的消息
          await this.$store.dispatch("m_team/agreeJoinTeam", {
            userId,
            teamId,
          });
          uni.showToast({
            icon: "success",
            title: "同意成功",
          });
        }

        await this.$store.dispatch("m_message/updateMessageStatus", {
          messageId,
          isHandle: true,
          isView: true,
        });
        this.$emit("refreshMessageList", 1);
      } catch (err) {
        console.log("同意加入失败：", err);
        uni.showToast({
          icon: "error",
          title: "同意失败",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.TeamMessageItem {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 20rpx;
  height: 180rpx;
  font-size: 28rpx;
  color: #999;
  border-bottom: 1px solid #eee;
  .left {
    width: 60%;
    .content {
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  .left,
  .operator {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .operator {
    align-items: flex-end;
  }
}
</style>
